<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<!-- vue ajax -->
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
	
	<script src="/o2o/js/utils.js"></script>

	<title>更新店铺</title>
</head>

<body>
	<div id="app">
		<!-- 头部导航 -->
		<van-nav-bar title="更新店铺" left-arrow @click-left="onClickLeft"></van-nav-bar>
		<!-- 表单 -->
		<van-form @submit="onSubmit">
			<van-field v-model="shopName" name="shopName" label="店铺名称" placeholder="店铺名称"
				:rules="[{ required: true, message: '请填写店铺名称' }]">
			</van-field>
			<!-- 店铺分类 -->
			<van-field readonly clickable name="shopCategoryId" :value="shopCategory" label="店铺分类"
				placeholder="点击选择店铺类别" @click="shopCategoryShowPicker = true" readonly></van-field>

			<!-- 所属区域 -->
			<van-field readonly clickable name="areaId" :value="area" label="所属区域" placeholder="点击选择所属区域"
				@click="areaShowPicker = true"></van-field>
			<van-popup v-model="areaShowPicker" position="bottom">
				<van-picker show-toolbar :columns="areaItem" :value-key="areaNameForColumns" @confirm="onConfirmForArea"
					@cancel="areaShowPicker = false" />
			</van-popup>
			<van-field v-model="shopAddr" label="详细地址" placeholder="详细地址"
				:rules="[{ required: true, message: '请填写详细地址' }]"></van-field>
			<!-- 输入手机号，调起手机号键盘 -->
			<van-field v-model="phone" type="tel" label="联系电话" name="phone" placeholder="联系电话"
				:rules="[{ required: true, message: '请填写手机号码' }]"></van-field>
			<van-field name="uploader" label="店铺图片">
				<template #input>
					<van-uploader v-model="shopImg" multiple :max-count="1" />
				</template>
			</van-field>
			<van-field v-model="shopDesc" rows="1" autosize label="店铺简介" type="textarea" placeholder="请输入店铺介绍">
			</van-field>

			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</body>

<script>
	Vue.use(vant.NavBar);
	Vue.use(vant.Form);
	Vue.use(vant.Uploader);

	// 获取shopId参数
	let shopId = getQueryVariable("shopId");

	var app = new Vue({
		el: "#app",
		data: {
			shopName: '修改	test-shopName',
			phone: '11111111111',
			shopAddr: '修改',
			shopImg: [],
			shopDesc: '修改',
			shopCategoryId: 1,
			areaId: 1,

			shopCategory: 'test-商品分类',

			area: '东区1',
			areaShowPicker: false,
			areaItem: [],
			areaNameForColumns: 'areaName',


		},
		methods: {

			// 头部返回按钮
			onClickLeft: function () {
				window.history.back();
			},
			// 表单提交事件
			onSubmit: function () {
				modifyShopInfo();
			},
			// 所属地区
			onConfirmForArea: function (value) {
				console.log(value, "所属地区");
				this.areaId = value.areaId;
				this.area = value.areaName;
				this.areaShowPicker = false;
			},

		}

	});

	/*获取地区列表*/
	axios.get('/o2o/shopadmin/toregister')
		.then(response => (
			console.log(response.data.data.area),
			// 地区
			response.data.data.area.forEach(item => {
				app.areaItem.push({ areaId: item.areaId, areaName: item.areaName });
			})
		)
		)
		.catch(function (error) { // 请求失败处理
			console.log(error);
		});

	/*修改店铺信息*/
	function modifyShopInfo() {
		let shop = {};
		shop.shopId = shopId;
		shop.shopName = app.shopName;
		shop.phone = app.phone;
		shop.shopAddr = app.shopAddr;
		shop.shopDesc = app.shopDesc;
		shop.shopCategoryId = app.shopCategoryId;
		shop.areaId = app.areaId;

		// 将shop对象转为json字符串
		let shopInfo = JSON.stringify(shop);

		// 表单提交
		let formData = new FormData();
		formData.append("shopInfo", shopInfo);
		if (app.shopImg.length != 0) {
			formData.append("shopImg", app.shopImg[0].file);
		}
		// 提交给服务器
		$.ajax({
			url: '/o2o/shopadmin/modify',
			type: 'POST',
			data: formData,
			contentType: false,
			processData: false,
			cache: false,
			success: function (data) {
				console.log(data);
				if (data.success == true) {
					console.log(window.location.href,"123");
					window.location.href="/o2o/shopadmin/listshop"; 
					console.log(window.location.href,"456");
				} else {
					alert(data.msg);
				}
			}
		});
	}
</script>

</html>